<!--
 * @Description:
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-12-21 14:43:01
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="z-w-100">
    <el-button type="primary" size="small" @click="likeSetting">
      偏好设置
    </el-button>

    <el-button type="primary" size="small" @click="setMarkerData">
      设置高亮线
    </el-button>

    <div v-if="show" style="height: 400px">
      <Gantt
        ref="Gantt"
        v-model="tasks"
        :columns="columns"
        :gant-config="gantConfig"
        :mark-data="markData"
      />
    </div>

    <baseDialog ref="markerDialog" title="设置高亮线" @comfire="comfireFun">
      <template slot="content">
        <markerTable />
      </template>
    </baseDialog>

    <baseDialog ref="baseDialog" title="偏好设置" @comfire="comfireFun">
      <template slot="content">
        <el-scrollbar class="scrollbarCls is-horizontal--none">
          <Form ref="Form" v-model="initFormData" :item-data="formData" />
        </el-scrollbar>
      </template>
    </baseDialog>
  </div>
</template>

<script>
import Gantt from "@/components/gantt/index.vue";
import baseDialog from "@/components/baseDialog/index.vue";
import Form from "@/components/Form/index.vue";
import markerTable from "./markerTable.vue";
// import { groupBy } from 'lodash'
// const gantt = window.gantt
import Dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "ChildController",
  components: {
    Gantt,
    baseDialog,
    Form,
    markerTable
  },
  data() {
    // const formateAdd = (obj) => {
    //   return `节点www`
    // }

    return {
      loading: true,
      initFormData: {
        holiyDayShow: [],
        startWeek: "",
        rowHeight: "default"
      },
      formData: [
        {
          props: "holiyDayShow",
          label: "假期显示",
          type: "el-select-options",
          config: {
            placeholder: "请选择假期显示",
            clearable: true,
            multiple: true,
            options: [
              { label: "周六", value: "0" },
              { label: "周日", value: "6" }
              // { label: '法定节假日', value: 'holiyday' }
            ]
          }
        },
        {
          props: "startWeek",
          label: "每周开始于",
          type: "el-select-options",
          config: {
            placeholder: "请选择每周开始于",
            clearable: true,
            options: [
              { label: "周一", value: "1" },
              { label: "周日", value: "0" }
            ]
          }
        },
        {
          props: "rowHeight",
          label: "行高度",
          type: "el-select-options",
          config: {
            placeholder: "请选择每周开始于",
            clearable: true,
            options: [
              { label: "标准", value: "default" },
              { label: "紧凑", value: "small" },
              { label: "宽松", value: "large" }
            ]
          }
        }
      ],
      gantConfig: {
        readonly: false
      },
      markData: [
        {
          start_date: "2018-01-04",
          css: "todayaaa",
          text: "Todayww",
          title: "Todayddd: ",
          style: "background:blue;"
        },
        {
          start_date: new Date(),
          css: "toDay",
          text: "当前时间",
          title: "当前时间",
          id: 555555
        }
      ],
      columns: [
        {
          name: "text",
          tree: true,
          width: 200,
          resize: true,
          label: "需求任务",
          checkbox: true,
          align: "left"
        },
        {
          name: "start_date",
          align: "left",
          width: 100,
          resize: true,
          label: "开始日期",
          template: (obj) => {
            return obj.noData ? "-" : obj.start_date;
          }
        },
        {
          name: "duration",
          align: "left",
          width: 100,
          resize: true,
          label: "工时"
        }
      ],
      show: false,
      tasks: {
        data: [],
        links: []
      }
    };
  },
  watch: {},
  mounted() {
    this.initData();
  },
  methods: {
    setMarkerData() {
      // markerDialog
      this.$refs.markerDialog.show();
    },
    likeSetting() {
      this.$refs.baseDialog.show(); // 弹窗显示
    },
    comfireFun() {
      const target = this.initFormData.holiyDayShow.map((v) => v * 1);
      const durationsMarkers =
        this.initFormData.startWeek.length > 0
          ? this.initFormData.startWeek * 1
          : "";

      const rowHeight = this.initFormData.rowHeight;
      // console.log()
      const data = {
        weekEnds: target, // 显示周六 还是 周日的样式
        durationsMarkers, // 设置某个时间段markers
        rowHeight, // 行高度设置
        isShowNoData: true // 是否显示有无数据
      };
      this.$refs.Gantt.setBussinessGantConfig(data);
      // this.isWeekEndShow = true
    },
    initData() {
      // 左侧维度
      // const ganttDimensions = [
      //   { field: '需求任务', id: '1123', display: true },
      //   { field: '负责人', id: '11232', display: true },
      //   { field: '开始事件', id: '11234', display: true },
      //   { field: '结束事件', id: '11235', display: true }
      // ]
      // // 左侧列表数据
      const ganttGroupings = [
        {
          priority: 1,
          id: "1123",
          field: "需求任务",
          sortType: "value",
          orderType: "asc"
        },
        {
          priority: 2,
          id: "dddd",
          field: "负责人",
          sortType: "value",
          orderType: "asc"
        }
      ];
      //  右侧图标数据
      // const list = Array.from({ length: 10000 }, (v, k) => {
      //   return {
      //     start_date: '2018-01-04', id: k + 1, 需求任务: '选项1' + k, endDate: '2022-10-5', 负责人: 'a' + k, end_date: '2021-10-11', text: '选项1'
      //   }
      // })
      const list = [
        {
          start_date: "2018-01-04",
          id: "1",
          需求任务: "选项1",
          endDate: "2022-10-5",
          负责人: "a",
          end_date: "2018-01-05",
          text: "选项1"
        }
        // { start_date: '2018-10-1', id: '2', 需求任务: '选项1', endDate: '2022-10-5', 负责人: 'a', end_date: '2019-10-11', text: '选项1' },
        // // { start_date: '', id: '222', 需求任务: '选项1', endDate: '', 负责人: 'a', end_date: '', text: '选项1aaaaaaxx', duration: '-1', noData: true },
        // { start_date: '2017-10-1', id: '3', 需求任务: '选项1', endDate: '2022-10-5', 负责人: 'b', end_date: '2018-10-11', text: '选项1' },
        // { start_date: '2016-10-1', id: '4', 需求任务: '选项14', endDate: '2022-10-5', 负责人: 'b', end_date: '2017-10-11', text: '选项14' },
        // { start_date: '2015-10-1', id: '5', 需求任务: '选项15', endDate: '2022-10-5', 负责人: 'c', end_date: '2016-10-11', text: '选项15' },
        // { start_date: '2013-10-1', id: '6', 负责人: 'c', endDate: '2022-10-5', 需求任务: 'zzz1', end_date: '2014-10-11', text: 'zzz1' },
        // { start_date: '2014-10-1', id: '7', 负责人: 'c', endDate: '2022-10-5', 需求任务: 'zzz2', end_date: '2015-10-11', text: 'zzz2' },
        // { start_date: '2022-10-1', id: '8', 负责人: 'd', endDate: '2022-10-5', 需求任务: 'zzz3', end_date: '2022-11-11', text: 'zzz3' }
      ];
      const ganttGroupingsArray = ganttGroupings.map((v) => v.field);
      function calcStartDate(list) {
        const dateList = list.map((v) => {
          return {
            min: v.start_date ? new Date(v.start_date).getTime() : 0,
            max: v.end_date ? new Date(v.end_date).getTime() : 0
          };
        });
        const min = Math.min(...dateList.map((v) => v.min));
        const max = Math.max(...dateList.map((v) => v.max));
        return {
          min: Dayjs(min).format("YYYY-MM-DD"),
          max: Dayjs(max).format("YYYY-MM-DD")
        };
      }
      const setChildData = (data) => {
        console.log(data, "data");
        const id = guid();
        data.forEach((v) => {
          v.parent = id;
        });
        const { min, max } = calcStartDate(data);
        return {
          id,
          data,
          min,
          max
        };
      };
      const defaultTreeConfig = {
        id: "id",
        pId: "pId",
        children: "children"
      };
      const treeToList = (tree, treeConfig) => {
        const config = Object.assign({}, defaultTreeConfig, treeConfig);
        const { children } = config;
        const result = [...tree];
        for (let i = 0; i < result.length; i++) {
          if (!result[i][children]) {
            continue;
          }
          result.splice(i + 1, 0, ...result[i][children]);
        }
        return result;
      };
      function guid() {
        return "xxxxx-xxxx".replace(/[xy]/g, (c) => {
          const r = (Math.random() * 16) | 0;
          const v = c === "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
      }
      const makeTree = function (data, properties) {
        const curPropName = properties[0];
        const remainingProps = _.drop(properties, 1);
        return _(data)
          .groupBy(curPropName)
          .map(function (val, key) {
            if (properties.length > 1) {
              const children = makeTree(val, remainingProps);
              const { id, data } = setChildData(children);
              return {
                text: key,
                children: data,
                id: id,
                open: true
              };
            } else {
              const { id, data } = setChildData(val);
              return {
                text: key,
                children: data,
                id: id,
                open: true
              };
            }
          })
          .value();
      };
      const s = makeTree(list, ganttGroupingsArray);
      // this.tasks.data = treeToList(s)
      console.log(treeToList(s), "this.tasks.data ");
      this.show = true;
    }
  }
};
</script>
